<template>
  <div>
    <el-card style="width: 40%; margin: 10px">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="用户名">
          <el-input v-model="form.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="form.nickname"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="form.sex" label="男">男</el-radio>
          <el-radio v-model="form.sex" label="女">女</el-radio>
          <el-radio v-model="form.sex" label="未知">未知</el-radio>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="余额(￥)">
          <el-input disabled v-model="form.account"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            ref="upload"
            :show-file-list="false"
            :limit="1"
            :action="filesUploadUrl"
            :on-success="filesUploadSuccess"
          >
            <el-button type="primary">点击上传</el-button>
          </el-upload>
          <el-image
            v-if="
              form.avatar !== undefined &&
              form.avatar !== null &&
              form.avatar !== ''
            "
            style="width: 100px; height: 100px; margin-top: 20px"
            :src="form.avatar"
            :preview-src-list="[form.avatar]"
          ></el-image>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button type="primary" @click="update">保 存</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Person",
  data() {
    return {
      form: {},
      filesUploadUrl:
        "http://" + window.server.filesUploadUrl + ":9090/files/upload",
      rules: {
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  created() {
    if (this.$refs["upload"]) {
      this.$refs["upload"].clearFiles(); // 清除历史文件列表
    }
    let str = localStorage.getItem("user") || "{}";
    this.form = JSON.parse(str);
    this.form.password = '';
  },
  methods: {
    update() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          request.put("/user", this.form).then((res) => {
            if (res && res.code !== '0') {
              this.$message({
                type: "error",
                message: res.msg,
              });
            } else {
              this.$message({
                type: "success",
                message: "更新成功",
              });
              this.form.password = '';
              // 触发Layout更新用户信息
              this.$emit("userLocal");
            }
          });
        }
      });
    },
    filesUploadSuccess(res) {
      this.form.avatar = res.data;
    },
  },
};
</script>

<style scoped>
</style>